body,
html {
  padding: 0;
  margin : 0;
}

h1 {
  text-align : center;
  height     : 8rem;
  line-height: 8rem;
  margin-top : 0;
}

.remote-wrap {
  position  : relative;
  display   : block;
  width     : 100vw;
  max-width : 1000px;
  height    : 100vh;
  margin    : 0 auto;
  padding   : 20px;
  box-sizing: border-box;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.75);

}

.info-item {
  display    : flex;
  height     : 2.5rem;
  line-height: 2.5rem;
}

.info-item label {
  font-size  : 1rem;
  font-weight: bold;
}

.info-item span {
  width           : 2.5rem;
  height          : 2.5rem;
  border-radius   : 50%;
  background-color: #d4380d;
}

.ctrl-box {
  display              : grid;
  grid-template-areas  : "null1 up null2""left ball right""null4 down null5";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows   : repeat(3, 1fr);
  position             : absolute;
  bottom               : 0;
  margin-bottom        : 60px;
  left                 : 50%;
  transform            : translateX(-50%);
  width                : 18vh;
  height               : 18vh;
  border               : 1px solid #505050;
  border-radius        : 50%;
  overflow             : hidden;
  box-shadow           : 1px 1px 1px 3px rgba(0, 0, 0, 0.75) inset;
}

.ctrl-box img {
  width     : 6vh;
  height    : 6vh;
  transition: all 0.3s;
}

.ctrl-box img:hover {
  transform: scale(1.05);
  cursor   : pointer;
}

.ctrl-box .up-icon {
  grid-area: up;
}

.ctrl-box .down-icon {
  grid-area: down;
}

.ctrl-box .left-icon {
  grid-area: left;
}

.ctrl-box .right-icon {
  grid-area: right;
}

.ctrl-box .null {
  grid-area: "null";
}